---
{
	"title": "Géocarte",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Affiche une carte dynamique sur laquelle des informations de sources supplémentaires peuvent être superposées.",
	"tag": "geomap",
	"parentdir": "geomap",
	"altLangPrefix": "geomap",
	"js": ["demo/client_functions"],
	"dateModified": "2025-11-18"
}
---
<span class="wb-prettify all-pre hide"></span>

<div class="row">
	<div class="col-md-6 pull-right col-xs-12">
		<aside class="alert alert-info">
			<h2 class="h3">Avis de mise à jour</h2>
			<p>Depuis BOEW 4.0.31 nous avons mise à jour la géocarte afin d'utiliser OpenLayer 3 donc les flux RSS et ATOM ne sont plus supporté. La configuration pour certaines cartes statiques on été changé et une configuration révisé est utilisé pour supporté les cartes de base XYZ. <a href="geomap-v4.0.30-fr.html">Accéder au example pratique antérieur à v4.0.30</a>.</p>
		</aside>
	</div>
	<div class="col-md-auto">
		<p>Affiche une carte dynamique sur laquelle des informations de sources supplémentaires peuvent être superposées.</p>
		<ul>
			<li><a href="#dynamique">Carte dynamique - Exemple</a></li>
			<li><a href="#statique">Carte statique - Exemple</a></li>
			<li><a href="#carte-wms">Carte WMS - Exemple WMS</a></li>
			<li><a href="#esri-rest">Exemple de carte ESRI REST</a></li>
			<li><a href="#osm">Exemple de carte de base OSM</a></li>
			<li><a href="#carte-xyz">Exemple de carte de base XYZ</a></li>
			<li><a href="#filtrer">Filtrer la carte</a></li>
			<li><a href="#aoiZoomOnLoad">Zoom à AOI au chargement de la page (étendue)</a></li>
			<li><a href="#singleItem">Fusionner la légende et le symbole</a></li>
			<li><a href="#twoCols">Afficher les éléments de la légende sur deux colonnes</a></li>
			<li><a href="#topojson_select">Carte TopoJSON avec styles sélectionnés et fenêtre contextuelle</a></li>
		</ul>
	</div>
</div>


<section>
	<h2 id="dynamique">Carte dynamique - Exemple</h2>
	<p>Depuis BOEW 4.0.31 nous avons mise à jour la géocarte afin d'utiliser OpenLayer 3 donc les flux RSS et ATOM ne sont plus supporté. Plusieurs des services qui ont été utilisé pour cet example n'existe plus et ils ont été enlevé. Veuillez mettre à jour le fichier <code>config-fr.js</code> tel qu'illustré dans l'<a href="./demo/config-fr.js">example</a>.</p>

	<!-- GeomapStart -->
	<div id="sample_map"
		class="wb-geomap position scaleline geocoder aoi aoi-open geolocation"
		data-wb-geomap='{
			"layersFile": "demo/config-fr{{environment.suffix}}.js",
			"tables": [{
				"id": "bbox",
				"zoom": true,
				"popups": true,
				"visible": false
			},{
				"id": "cities",
				"zoom": true,
				"tooltips": true,
				"tooltipText": "Population de 2011",
				"popups": true,
				"popupsInfo": {
					"content": "<div style=\"white-space:nowrap;\"><p><strong>Subdivision de recensement: </strong>_Subdivision de recensement<div><a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom à la ville\" aria-label=\"Zoom à la ville\" onclick=\"wb.doc.zoomFeature()\">Zoom à la ville</a></div></div>"
				},
				"style": {
					"type": "rule",
					"rule": [
					{
						"field": "Rang",
						"value": [3],
						"filter": "GREATER_THAN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 2.6,
							"fillOpacity": 1.0,
							"strokeWidth": 8,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rang",
						"value": [2, 3],
						"filter": "BETWEEN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 4,
							"fillOpacity": 1.0,
							"strokeWidth": 12,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rang",
						"value": [1],
						"filter": "EQUAL_TO",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 5.3,
							"fillOpacity": 1.0,
							"strokeWidth": 16,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					}
				]}
			}]
		}'>

		<div class="row">
			<div class="col-md-9 form-group">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>

			<!-- Insert Legend Start (optional) -->
			<section class="col-md-3 form-group">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Légende</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</section>
			<!-- Insert Legend End -->
		</div>

		<!-- Insert Layer Data Start (mandatory) -->
		<div class="row">
			<section>
				<div class="wb-geomap-layers col-md-12">
					<h3>Exemple - Données dans le fichier HTML</h3>
					<p>Les données est créées à partir des tables suivantes. Un attribut <code>data-geometry</code> contient la géométrie et un attribut <code>data-type</code> contient le type (wkt ou bbox) ont été ajoutés à chaque ligne.</p>
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">Points</div>
						</div>
						<div class="panel-body">
							<table id="cities" aria-label="Points" class="table wb-tables">
								<caption>Tableau de géométrie point</caption>
								<thead>
									<tr>
										<th>Rang</th>
										<th>Subdivision de recensement</th>
										<th>Population de 2011</th>
									</tr>
								</thead>
								<tbody>
									<tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt">
										<td>1</td>
										<td><a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto">Toronto</a></td>
										<td>2&#160;615&#160;060</td>
									</tr>
									<tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt">
										<td>2</td>
										<td><a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal">Montreal</a></td>
										<td>1&#160;649&#160;519</td>
									</tr>
									<tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt">
										<td>3</td>
										<td><a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary">Calgary</a></td>
										<td>1&#160;096&#160;833</td>
									</tr>
									<tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt">
										<td>4</td>
										<td class="select"><a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa">Ottawa</a></td>
										<td>883&#160;391</td>
									</tr>
									<tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt">
										<td>5</td>
										<td><a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton">Edmonton</a></td>
										<td>812&#160;201</td>
									</tr>
									<tr data-geometry="POINT (-79.65 43.60)" data-type="wkt">
										<td>6</td>
										<td><a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga">Mississauga</a></td>
										<td>713&#160;443</td>
									</tr>
									<tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt">
										<td>7</td>
										<td><a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg">Winnipeg</a></td>
										<td>663&#160;617</td>
									</tr>
									<tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt">
										<td>8</td>
										<td><a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver">Vancouver</a></td>
										<td>603&#160;502</td>
									</tr>
									<tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt">
										<td>9</td>
										<td><a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton">Brampton</a></td>
										<td>523&#160;911</td>
									</tr>
									<tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt">
										<td>10</td>
										<td><a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario">Hamilton</a></td>
										<td>519&#160;949</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">Boîtes des délimitations</div>
						</div>
						<div class="panel-body">
							<table id="bbox" aria-label="Boîtes des délimitations" class="table table-condensed">
								<caption>Tableau des boîtes de délimitations</caption>
								<thead>
									<tr>
										<th>Titre</th>
										<th>Géométrie</th>
									</tr>
								</thead>
								<tbody>
									<tr data-geometry="-136, 61, -118, 70" data-type="bbox">
										<td>Rapport de 2011 sur les activités terrain et la collecte de données terrain dont les couches thermiques et active dans le corridor du Mackenzie, Territoires du Nord, n ° de licence 14918</td>
										<td>-136, 61, -118, 70</td>
									</tr>
									<tr data-geometry="-92.5, 72.75, -79, 75.5" data-type="bbox">
										<td>Dinokystes du Crétacé supérieur-inférieur tertiaire, îles de Bylot et Devon, archipel arctique</td>
										<td>-92.5, 72.75, -79, 75.5</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<section class="col-md-12">
							<h3>Exemple - Données extérieure &amp; provenant de fichiers</h3>
							<p>Les données sont créées à partir de fichiers, fils ou d'API web.</p>
						</section>
					</div>
				</div>
			</section>
		</div>
		<!-- Insert Layer Data End-->
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-bttm-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;sample_map&quot;
	class=&quot;wb-geomap position scaleline geocoder aoi aoi-open geolocation&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-fr{{environment.suffix}}.js&quot;,
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;bbox&quot;,
			&quot;tab&quot;: false,
			&quot;zoom&quot;: true,
			&quot;popups&quot;: true,
			&quot;visible&quot;: false
		},{
			&quot;id&quot;: &quot;cities&quot;,
			&quot;zoom&quot;: true,
			&quot;tab&quot;: false,
			&quot;popups&quot;: true,
			&quot;popupsInfo&quot;: {
				&quot;id&quot;: &quot;citiesPopup&quot;,
				&quot;height&quot;: 200,
				&quot;width&quot;: 300,
				&quot;close&quot;: true,
				&quot;content&quot;: &quot;&lt;div style=\&quot;white-space:nowrap;\&quot;&gt;&lt;p&gt;&lt;strong&gt;Subdivision de recensement: &lt;/strong&gt;_Subdivision de recensement&lt;div&gt;&lt;a href=\&quot;#\&quot; class=\&quot;button\&quot; role=\&quot;button\&quot; title=\&quot;Zoom à la ville\&quot; aria-label=\&quot;Zoom à la ville\&quot; onclick=\&quot;wb.doc.zoomFeature()\&quot;&gt;Zoom à la ville&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&quot;
			},
			&quot;style&quot;: {
				&quot;type&quot;: &quot;rule&quot;,
				&quot;rule&quot;: [
				{
					&quot;field&quot;: &quot;Rang&quot;,
					&quot;value&quot;: [3],
					&quot;filter&quot;: &quot;GREATER_THAN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#0083f5&quot;,
						&quot;fillColor&quot;: &quot;#57a8f0&quot;,
						&quot;pointRadius&quot;: &quot;6&quot;,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rang&quot;,
					&quot;value&quot;: [2, 3],
					&quot;filter&quot;: &quot;BETWEEN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F90&quot;,
						&quot;fillColor&quot;: &quot;#F90&quot;,
						&quot;pointRadius&quot;: &quot;8&quot;,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rang&quot;,
					&quot;value&quot;: [1],
					&quot;filter&quot;: &quot;EQUAL_TO&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F00&quot;,
						&quot;fillColor&quot;: &quot;#F00&quot;,
						&quot;pointRadius&quot;: &quot;10&quot;,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				}
			]}
		}]
	}'&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-9&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;

		&lt;!-- Insert Legend Start (optional) --&gt;
		&lt;section class=&quot;wb-geomap-legend col-md-3&quot;&gt;
			&lt;h3&gt;Légende&lt;/h2&gt;
		&lt;/section&gt;
		&lt;!-- Insert Legend End --&gt;
	&lt;/div&gt;

	&lt;!-- Insert Layer Data Start (mandatory) --&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;section class=&quot;col-md-12&quot;&gt;
			&lt;h3&gt;Exemple - Données extérieure &amp;amp; provenant de fichiers&lt;/h3&gt;
			&lt;p&gt;Les données sont créées à partir de fichiers, fils ou d'API web.&lt;/p&gt;
		&lt;/section&gt;
	&lt;/div&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;section&gt;
			&lt;div class=&quot;wb-geomap-layers col-md-12&quot;&gt;
				&lt;h3&gt;Exemple - Données dans le fichier HTML&lt;/h3&gt;
				&lt;p&gt;Les données est créées à partir des tables suivantes. Un attribut &lt;code&gt;data-geometry&lt;/code&gt; contient la géométrie et un attribut &lt;code&gt;data-type&lt;/code&gt; contient le type (wkt ou bbox) ont été ajoutés à chaque ligne.&lt;/p&gt;
				&lt;section&gt;
					&lt;h4&gt;Points&lt;/h4&gt;
					&lt;table id=&quot;cities&quot; aria-label=&quot;Points&quot; class=&quot;table wb-tables&quot;&gt;
						&lt;caption&gt;Tableau de géométrie point&lt;/caption&gt;
						&lt;thead&gt;
							&lt;tr&gt;
								&lt;th&gt;Rang&lt;/th&gt;
								&lt;th&gt;Subdivision de recensement&lt;/th&gt;
								&lt;th&gt;Population de 2011&lt;/th&gt;
							&lt;/tr&gt;
						&lt;/thead&gt;
						&lt;tbody&gt;
							&lt;tr data-geometry=&quot;POINT (-79.3847 43.6476)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;1&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Toronto&quot; title=&quot;Toronto&quot;&gt;Toronto&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;2615060&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-73.56123 45.52927)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;2&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Montreal&quot; title=&quot;Montreal&quot;&gt;Montreal&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1649519&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-114.05879 51.04668)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;3&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Calgary&quot; title=&quot;Calgary&quot;&gt;Calgary&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1096833&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-75.68937 45.41072)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;4&lt;/td&gt;
								&lt;td class=&quot;select&quot;&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Ottawa&quot; title=&quot;Ottawa&quot;&gt;Ottawa&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;883391&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-113.49590 53.53398)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;5&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Edmonton&quot; title=&quot;Edmonton&quot;&gt;Edmonton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;812201&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.65 43.60)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;6&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Mississauga&quot; title=&quot;Mississauga&quot;&gt;Mississauga&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;713443&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-97.14352 49.89375)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;7&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Winnipeg&quot; title=&quot;Winnipeg&quot;&gt;Winnipeg&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;663617&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-123.10091 49.26428)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;8&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Vancouver&quot; title=&quot;Vancouver&quot;&gt;Vancouver&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;603502&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.76181 43.68686)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;9&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Brampton&quot; title=&quot;Brampton&quot;&gt;Brampton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;523911&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.86788 43.25717)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;10&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Hamilton,_Ontario&quot; title=&quot;Hamilton, Ontario&quot;&gt;Hamilton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;519949&lt;/td&gt;
							&lt;/tr&gt;
						&lt;/tbody&gt;
					&lt;/table&gt;
				&lt;/section&gt;
			&lt;/div&gt;

			&lt;section class=&quot;col-md-12&quot;&gt;
				&lt;h4&gt;Boîtes des délimitations&lt;/h4&gt;
				&lt;table id=&quot;bbox&quot; aria-label=&quot;Boîtes des délimitations&quot; class=&quot;table table-condensed&quot;&gt;
					&lt;caption&gt;Tableau des boîtes de délimitations&lt;/caption&gt;
					&lt;thead&gt;
						&lt;tr&gt;
							&lt;th&gt;Titre&lt;/th&gt;
							&lt;th&gt;Géométrie&lt;/th&gt;
						&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;
						&lt;tr data-geometry=&quot;-136, 61, -118, 70&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Rapport de 2011 sur les activités terrain et la collecte de données terrain dont les couches thermiques et active dans le corridor du Mackenzie, Territoires du Nord, n ° de licence 14918&lt;/td&gt;
							&lt;td&gt;-136, 61, -118, 70&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry=&quot;-92.5, 72.75, -79, 75.5&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Dinokystes du Crétacé supérieur-inférieur tertiaire, îles de Bylot et Devon, archipel arctique&lt;/td&gt;
							&lt;td&gt;-92.5, 72.75, -79, 75.5&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/tbody&gt;
				&lt;/table&gt;
			&lt;/section&gt;
		&lt;/section&gt;
	&lt;/div&gt;
	&lt;!-- Insert Layer Data End--&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="statique">Carte statique - Exemple</h2>
	<p>Geomap peux être configuré pour créer une carte statique afin de situer un endroit comme un bureau ou une étendue à l'aide d'une "bbox".</p>
	<p>Depuis BOEW 4.0.31 nous avons mise à jour la géocarte afin d'utiliser OpenLayer 3 et le code dans <code>client_functions.js</code> a changé. Veuillez mettre à jour <code>client_functions.js</code> tel qu'illustré dans l'<a href="./demo/client_functions.js">example</a>. Les cartes statique qui utilise une configuration très similaire tel que configuré et démontré depuis la version 4.0.30, qui est désuet, devrait continuer de fonctionner. Nous vous recommandons de mettre à jour votre code tel qu'illustré dans l'example suivant.</p>

	<!-- GeomapStart -->
	<div id="location_map"
		class="wb-geomap static"
		data-wb-geomap='{
			"tables": [{
				"id": "addNRCan",
				"style": {
					"type": "symbol",
					"init": {
						"pointRadius": 12,
						"graphicName": "star",
						"strokeColor": "#FF0000",
						"fillColor": "#FF0000",
						"fillOpacity": 0.7
					}
				}
			}]
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4">
				<table id="addNRCan" aria-label="Adresse des bureaux de RNCan Ottawa" class="table">
					<caption class="wb-inv">Adresse des bureaux de Ressources naturelles Canada Ottawa</caption>
					<thead>
						<tr>
							<th>Adresse</th>
						</tr>
					</thead>
					<tbody>
						<tr data-geometry="POINT (-75.70535 45.3995)" data-type="wkt">
							<td>615 rue Booth,<br>Ottawa (ON),<br>Canada,<br>K1A 0E8</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap static&quot;
	data-wb-geomap='{
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;addNRCan&quot;,
			&quot;style&quot;: {
				&quot;type&quot;: &quot;symbol&quot;,
				&quot;init&quot;: {
					&quot;pointRadius&quot;: 12,
					&quot;graphicName&quot;: &quot;star&quot;,
					&quot;strokeColor&quot;: &quot;#FF0000&quot;,
					&quot;fillColor&quot;: &quot;#FF0000&quot;,
					&quot;fillOpacity&quot;: 0.7
				}
			}
		}]
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;
			&lt;table id=&quot;addNRCan&quot; aria-label=&quot;Adresse des bureaux de RNCan Ottawa&quot; class=&quot;table&quot;&gt;
				&lt;caption class=&quot;wb-inv&quot;&gt;Adresse des bureaux de Ressources naturelles Canada Ottawa&lt;/caption&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th&gt;Adresse&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
				&lt;tbody&gt;
					&lt;tr data-geometry=&quot;POINT (-75.70535 45.3995)&quot; data-type=&quot;wkt&quot;&gt;
						&lt;td&gt;615 rue Booth,&lt;br /&gt;Ottawa (ON),&lt;br /&gt;Canada,&lt;br /&gt;K1A 0E8&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="carte-wms">Carte WMS - Exemple WMS</h2>
	<p>Geomap peut être configuré pour utiliser une carte de base de type WMS. L'item basemap dans le fichier de configuration permet de définir le WMS à utiliser.</p>

	<!-- GeomapStart -->
	<div id="wms_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/configwms-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/configwms-fr{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>Visualiser le fichier de configuration</summary>
			<pre><code>
var wet_boew_geomap = {
	// OPTIONAL: note that Geomap will provide a default basemap if not specified here.
	basemap : {
		title: &quot;WMS-Toporama&quot;,
		type: &quot;wms&quot;,
		url: &quot;http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en&quot;,
		version: &quot;1.1.1&quot;,
		format: &quot;image/jpeg&quot;,
		layers: &quot;WMS-Toporama&quot;,
		mapOptions: {
			maxExtent: &quot;-141, 41, -52, 84&quot;,
			restrictedExtent: &quot;-141, 41, -52, 84&quot;,
			maxResolution: &quot;auto&quot;,
			projection: &quot;EPSG:4269&quot;,
			units: &quot;m&quot;,
			displayProjection: &quot;EPSG:4269&quot;,
			aspectRatio: 0.8
		}
	},
	overlays: []
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="esri-rest">Exemple de carte ESRI REST</h2>
	<p>Geomap peut être configuré pour utiliser une carte de base de type ESRI REST. L'item basemap dans le fichier de configuration permet de définir le service à utiliser.</p>

	<!-- GeomapStart -->
	<div id="esri_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-esri-fr{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;esri_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-esri-fr{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>Visualiser le fichier de configuration</summary>
			<pre><code>
var wet_boew_geomap = {
	basemap : {
		title: &quot;Basic Map&quot;,
		type: &quot;esri&quot;,
		url: &quot;https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/provinces1c/MapServer/export&quot;,
		options: { singleTile: false, ratio: 1.0, projection: &quot;EPSG:3978&quot;, fractionalZoom: true },
		mapOptions: {
			maxExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
			maxResolution: &quot;auto&quot;,
			projection: &quot;EPSG:3978&quot;,
			restrictedExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
			units: &quot;m&quot;,
			displayProjection: &quot;EPSG:4269&quot;,
			numZoomLevels: 2
		}
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="osm">Exemple de carte de base OSM</h2>
	<p>Geomap peut être configuré pour utiliser un service de OSM comme carte de base. La configuration peut être effectuée dans le paramètre <code>basemap</code> du fichier config.</p>

	<!-- GeomapStart -->
	<div id="osm_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-osm-fr.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;osm_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-osm-fr.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>Visualiser le fichier de configuration</summary>
			<pre><code>
var wet_boew_geomap = {
	title: "OSM Map",
	type: "osm",
	mapOptions: {
		center: [ -52.7222765, 47.5410882 ],
		zoomLevel: 11
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="carte-xyz">Exemple de carte de base XYZ</h2>
	<p>Geomap peut être configuré pour utiliser un service de tuiles XYZ (ex : MapQuest) comme carte de base. La configuration peut être effectuée dans le paramètre <code>basemap</code> du fichier config.</p>
	<p>Avant la BOEW 4.0.31 le service utilisé pour créer cet example n'est plus supporté. Veuillez consulter la configuration révisé ci-dessous.</p>
	<!-- GeomapStart -->
	<div id="xyz_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-xyz-fr.js",
			"attribution": { "text":"Les tuiles sont une courtoisies de &lt;a href=\"https://www.mapquest.com/\" target=\"_blank\"&gt;MapQuest&lt;/a&gt;", "href":"" }
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;xyz_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-xyz-fr.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>Visualiser le fichier de configuration</summary>
			<pre><code>
var wet_boew_geomap = {
	title: "Tile (XYZ) Source Map",
	type: "osm",
	url: [
		"//otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
	],
	mapOptions: {
		projection: "EPSG:900913",
		center: [ -123, 49 ],
		zoomLevel: 5
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="filtrer">Filtrer la carte</h2>

	<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter">
		<div class="form-group">
			<label for="gm_province">Province:</label>
			<select id="gm_province" class="form-control" data-filter="aoi">
				<!-- Les dimension ci-dessous sont approximative pour cette demonstration seulement -->
				<option selected value="64.097 -10.63 34.692 -177.659">Canada</option>
				<option value="60 -120 48 -139">Colombie Britannique</option>
				<option value="60 -110 49 -120">Alberta</option>
				<option value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))">Québec</option>
			</select>
		</div>
		<div class="form-group">
			<label for="gm_layer">Couche:</label>
			<select id="gm_layer" class="form-control" data-filter="layer">
				<option value="Points" selected>Points</option>
				<option value="KML">KML</option>
				<option value="TopoJSON (World 110m)">TopoJSON (World 110m)</option>
				<option value="">(tous)</option>
			</select>
		</div>
		<button class="btn btn-primary" aria-controls="sample_map_filter" type="submit">Filtrer</button>
		<button class="btn btn-link btn-sm p-0 pl-2" type="reset">Réinitialiser aux valeurs par défaut</button>
	</form>
	<div id="sample_map_filter"
		class="wb-geomap position scaleline geocoder geolocation"
		data-wb-geomap='{
			"tables": [{
				"id": "cities_forFilterSample",
				"zoom": true,
				"tooltips": true,
				"tooltipText": "Population de 2011",
				"popups": true,
				"popupsInfo": {
					"content": "<div style=\"white-space:nowrap;\"><p><strong>Subdivision de recensement: </strong>_Subdivision de recensement<div><a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom à la ville\" aria-label=\"Zoom à la ville\" onclick=\"wb.doc.zoomFeature()\">Zoom à la ville</a></div></div>"
				},
				"style": {
					"type": "rule",
					"rule": [
					{
						"field": "Rang",
						"value": [3],
						"filter": "GREATER_THAN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 2.6,
							"fillOpacity": 1.0,
							"strokeWidth": 8,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rang",
						"value": [2, 3],
						"filter": "BETWEEN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 4,
							"fillOpacity": 1.0,
							"strokeWidth": 12,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rang",
						"value": [1],
						"filter": "EQUAL_TO",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 5.3,
							"fillOpacity": 1.0,
							"strokeWidth": 16,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					}
				]}
			}],
			"overlays": [
			{
				"title": "KML",
				"caption": "*NEEDS TRANSLATION*This data is extracted from the <a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\">Principal mineral areas of Canada</a> publication.",
				"type": "kml",
				"url": "demo/producing-mines.kml",
				"visible": false,
				"datatable": true,
				"tooltips": true,
				"tooltipText": "Opération",
				"popups": true,
				"attributes": {
					"Type_": "Type",
					"OwnersF": "Opérateur / propriétaire",
					"OperationF": "Opération",
					"ComGroupF": "Groupe de produits minéraux",
					"CommodityF": "Produit minérale"
				},
				"style": {
					"type": "unique",
					"field": "Type",
					"init": {
						"Coal": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Mines de charbon"
						},
						"Metal mines and mills": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Mines de métaux"
						},
						"Industrial minerals": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Mines de non-métaux"
						},
						"Oil Sands": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Mines de sables bitumineux"
						}
					},
					"select": {
						"externalGraphic": "",
						"graphicOpacity": "1"
					}
				}
			},
			{
				"title": "TopoJSON (World 110m)",
				"caption": "*NEEDS TRANSLATION*This is a sample dataset loaded from a remote TopoJSON resource.",
				"type": "topojson",
				"url": "demo/topojson.json",
				"accessible": false,
				"style": {
					"strokeColor": "#3399ff",
					"strokeWidth": 2.0
				},
				"visible": false
			}]
		}'>

		<div class="row">
			<div class="col-md-9 form-group">
				<div class="wb-geomap-map"></div>
			</div>

			<section class="col-md-3 form-group">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Légende</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</section>
		</div>

		<div class="wb-geomap-layers col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="panel-title">Points</div>
				</div>
				<div class="panel-body">
					<table id="cities_forFilterSample" aria-label="Points" class="table wb-tables">
						<caption>Tableau de géométrie point</caption>
						<thead>
							<tr>
								<th>Rang</th>
								<th>Subdivision de recensement</th>
								<th>Population de 2011</th>
							</tr>
						</thead>
						<tbody>
							<tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt">
								<td>1</td>
								<td><a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto">Toronto</a></td>
								<td>2&#160;615&#160;060</td>
							</tr>
							<tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt">
								<td>2</td>
								<td><a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal">Montreal</a></td>
								<td>1&#160;649&#160;519</td>
							</tr>
							<tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt">
								<td>3</td>
								<td><a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary">Calgary</a></td>
								<td>1&#160;096&#160;833</td>
							</tr>
							<tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt">
								<td>4</td>
								<td class="select"><a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa">Ottawa</a></td>
								<td>883&#160;391</td>
							</tr>
							<tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt">
								<td>5</td>
								<td><a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton">Edmonton</a></td>
								<td>812&#160;201</td>
							</tr>
							<tr data-geometry="POINT (-79.65 43.60)" data-type="wkt">
								<td>6</td>
								<td><a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga">Mississauga</a></td>
								<td>713&#160;443</td>
							</tr>
							<tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt">
								<td>7</td>
								<td><a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg">Winnipeg</a></td>
								<td>663&#160;617</td>
							</tr>
							<tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt">
								<td>8</td>
								<td><a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver">Vancouver</a></td>
								<td>603&#160;502</td>
							</tr>
							<tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt">
								<td>9</td>
								<td><a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton">Brampton</a></td>
								<td>523&#160;911</td>
							</tr>
							<tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt">
								<td>10</td>
								<td><a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario">Hamilton</a></td>
								<td>519&#160;949</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details class="mrgn-bttm-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter"&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="gm_province"&gt;Province:&lt;/label&gt;
		&lt;select id="gm_province" class="form-control" data-filter="aoi"&gt;
			&lt;!-- Les dimension ci-dessous sont approximative pour cette demonstration seulement --&gt;
			&lt;option selected value="64.097 -10.63 34.692 -177.659"&gt;Canada&lt;/option&gt;
			&lt;option value="60 -120 48 -139"&gt;Colombie Britannique&lt;/option&gt;
			&lt;option value="60 -110 49 -120"&gt;Alberta&lt;/option&gt;
			&lt;option value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))"&gt;Québec&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="gm_layer"&gt;Couche:&lt;/label&gt;
		&lt;select id="gm_layer" class="form-control" data-filter="layer"&gt;
			&lt;option value="Points" selected&gt;Points&lt;/option&gt;
			&lt;option value="KML"&gt;KML&lt;/option&gt;
			&lt;option value="TopoJSON (World 110m)"&gt;TopoJSON (World 110m)&lt;/option&gt;
			&lt;option value=""&gt;(tous)&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;button class="btn btn-primary" aria-controls="sample_map_filter" type="submit"&gt;Filtrer&lt;/button&gt;
	&lt;button class="btn btn-link" type="reset"&gt;Réinitialiser la page aux valeurs par défaut&lt;/button&gt;
&lt;/form&gt;
&lt;div id="sample_map_filter"
	class="wb-geomap position scaleline geocoder geolocation"
	data-wb-geomap='{
		"tables": [{
			"id": "cities_forFilterSample",
			"zoom": true,
			"tooltips": true,
			"tooltipText": "Population de 2011",
			"popups": true,
			"popupsInfo": {
				"content": "&lt;div style=\"white-space:nowrap;\"&gt;&lt;p&gt;&lt;strong&gt;Subdivision de recensement: &lt;/strong&gt;_Subdivision de recensement&lt;div&gt;&lt;a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom à la ville\" aria-label=\"Zoom à la ville\" onclick=\"wb.doc.zoomFeature()\"&gt;Zoom à la ville&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;"
			},
			"style": {
				"type": "rule",
				"rule": [
				{
					"field": "Rang",
					"value": [3],
					"filter": "GREATER_THAN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 2.6,
						"fillOpacity": 1.0,
						"strokeWidth": 8,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rang",
					"value": [2, 3],
					"filter": "BETWEEN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 4,
						"fillOpacity": 1.0,
						"strokeWidth": 12,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rang",
					"value": [1],
					"filter": "EQUAL_TO",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 5.3,
						"fillOpacity": 1.0,
						"strokeWidth": 16,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				}
			]}
		}],
		"overlays": [
		{
			"title": "KML",
			"caption": "*NEEDS TRANSLATION*This data is extracted from the &lt;a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\"&gt;Principal mineral areas of Canada&lt;/a&gt; publication.",
			"type": "kml",
			"url": "demo/producing-mines.kml",
			"visible": false,
			"datatable": true,
			"tooltips": true,
			"tooltipText": "Opération",
			"popups": true,
			"attributes": {
				"Type_": "Type",
				"OwnersF": "Opérateur / propriétaire",
				"OperationF": "Opération",
				"ComGroupF": "Groupe de produits minéraux",
				"CommodityF": "Produit minérale"
			},
			"style": {
				"type": "unique",
				"field": "Type",
				"init": {
					"Coal": {
						"externalGraphic": "",
						"fillOpacity": "1",
						"graphicWidth": "25",
						"name": "Mines de charbon"
					},
					"Metal mines and mills": {
						"externalGraphic": "",
						"fillOpacity": "1",
						"graphicWidth": "25",
						"name": "Mines de métaux"
					},
					"Industrial minerals": {
						"externalGraphic": "",
						"fillOpacity": "1",
						"graphicWidth": "25",
						"name": "Mines de non-métaux"
					},
					"Oil Sands": {
						"externalGraphic": "",
						"fillOpacity": "1",
						"graphicWidth": "25",
						"name": "Mines de sables bitumineux"
					}
				},
				"select": {
					"externalGraphic": "",
					"graphicOpacity": "1"
				}
			}
		},
		{
			"title": "TopoJSON (World 110m)",
			"caption": "*NEEDS TRANSLATION*This is a sample dataset loaded from a remote TopoJSON resource.",
			"type": "topojson",
			"url": "demo/topojson.json",
			"accessible": false,
			"style": {
				"strokeColor": "#3399ff",
				"strokeWidth": 2.0
			},
			"visible": false
		}]
	}'&gt;

	&lt;div class="row"&gt;
		&lt;div class="col-md-9 form-group"&gt;
			&lt;div class="wb-geomap-map"&gt;&lt;/div&gt;
		&lt;/div&gt;

		&lt;section class="col-md-3 form-group"&gt;
			&lt;div class="panel panel-default"&gt;
				&lt;header class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Légende&lt;/h3&gt;
				&lt;/header&gt;
				&lt;div class="panel-body"&gt;
					&lt;div class="wb-geomap-legend"&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/section&gt;
	&lt;/div&gt;

	&lt;div class="wb-geomap-layers col-md-12"&gt;
		&lt;div class="panel panel-default"&gt;
			&lt;div class="panel-heading"&gt;
				&lt;div class="panel-title"&gt;Points&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel-body"&gt;
				&lt;table id="cities_forFilterSample" aria-label="Points" class="table wb-tables"&gt;
					&lt;caption&gt;Tableau de géométrie point&lt;/caption&gt;
					&lt;thead&gt;
						&lt;tr&gt;
							&lt;th&gt;Rang&lt;/th&gt;
							&lt;th&gt;Subdivision de recensement&lt;/th&gt;
							&lt;th&gt;Population de 2011&lt;/th&gt;
						&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;
						&lt;tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt"&gt;
							&lt;td&gt;1&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto"&gt;Toronto&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;2&#160;615&#160;060&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt"&gt;
							&lt;td&gt;2&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal"&gt;Montreal&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;1&#160;649&#160;519&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt"&gt;
							&lt;td&gt;3&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary"&gt;Calgary&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;1&#160;096&#160;833&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt"&gt;
							&lt;td&gt;4&lt;/td&gt;
							&lt;td class="select"&gt;&lt;a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa"&gt;Ottawa&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;883&#160;391&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt"&gt;
							&lt;td&gt;5&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton"&gt;Edmonton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;812&#160;201&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.65 43.60)" data-type="wkt"&gt;
							&lt;td&gt;6&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga"&gt;Mississauga&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;713&#160;443&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt"&gt;
							&lt;td&gt;7&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg"&gt;Winnipeg&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;663&#160;617&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt"&gt;
							&lt;td&gt;8&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver"&gt;Vancouver&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;603&#160;502&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt"&gt;
							&lt;td&gt;9&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton"&gt;Brampton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;523&#160;911&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt"&gt;
							&lt;td&gt;10&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario"&gt;Hamilton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;519&#160;949&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/tbody&gt;
				&lt;/table&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section id="aoiZoomOnLoad">
	<h2>Zoom à AOI au chargement de la page (étendue)</h2>

	<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap">
		<div class="form-group">
			<label for="zoomBCArea">Régions de C.-B.:</label>
			<select class="form-control" data-filter="aoi" id="zoomBCArea">
				<option value="63 -110 50 -128" selected>Sélectionnez une région</option>
				<option value="61 -124 55.33 -140.6">Nord</option>
				<option value="50.802 -123.316 48.312 -128.578">Île de Vancouver et la côte</option>
				<option value="50.2806 -121.7203 49.0199 -124.4421">Basse-terre continentale</option>
				<option value="52.4999 -118.5493 48.9964 -114.0535">Intérieur sud</option>
			</select>
		</div>
		<button aria-controls="bc-geomap" class="btn btn-primary" type="submit">Filtrer</button>
		<button class="btn btn-link" type="reset">Réinitialiser la page aux valeurs par défaut</button>
	</form>
	<div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128"
	}'>
		<div class="wb-geomap-map"></div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap"&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="zoomBCArea"&gt;Régions de C.-B.:&lt;/label&gt;
		&lt;select class="form-control" data-filter="aoi" id="zoomBCArea"&gt;
			&lt;option value="63 -110 50 -128" selected&gt;Sélectionnez une région&lt;/option&gt;
			&lt;option value="61 -124 55.33 -140.6"&gt;Nord&lt;/option&gt;
			&lt;option value="50.802 -123.316 48.312 -128.578"&gt;Île de Vancouver et la côte&lt;/option&gt;
			&lt;option value="50.2806 -121.7203 49.0199 -124.4421"&gt;Basse-terre continentale&lt;/option&gt;
			&lt;option value="52.4999 -118.5493 48.9964 -114.0535"&gt;Intérieur sud&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;button aria-controls="bc-geomap" class="btn btn-primary" type="submit"&gt;Filtrer&lt;/button&gt;
	&lt;button class="btn btn-link" type="reset"&gt;Réinitialiser la page aux valeurs par défaut&lt;/button&gt;
&lt;/form&gt;
&lt;div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
	"mapExtent": "63, -110, 50, -128"
}'&gt;
	&lt;div class="wb-geomap-map"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section id="singleItem">
	<h2>Fusionner la légende et le symbole</h2>
	<p>Lorsque le calque de légende ne comporte qu'un seul élément de légende, masquez l'élément de légende et ne conservez que l'étiquette avec l'icône.</p>
	<div class="wb-geomap legend-label-only" id="geomap_single" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128",
		"overlays": [
			{
				"title": "Expansion et productivité des entreprises",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan",
				"type": "kml",
				"url": "demo/BusinessScaleProductivity_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"Expansion des entreprises": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						},
						"Productivité des entreprises": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "Écosystèmes d&apos;innovation régionaux",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan",
				"type": "kml",
				"url": "demo/RegionalInnovationEcosystem_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"Écosystèmes d&apos;innovation régionaux": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "CEDD (anciennement WDP)",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan.",
				"type": "kml",
				"url": "demo/WesternDiversificationProgram_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"CEDD (anciennement WDP)": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			}
		]
	}'>
		<div class="row mrgn-bttm-lg">
			<div class="col-md-8">
				<div class="wb-geomap-map"></div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Légende</h3>
					</header>
					<div class="panel-body">
						<p class="”h4”"><strong>Choisissez parmi les programmes PacifiCan suivants pour voir les projets financés à travers la Colombie-Britannique&nbsp;:</strong></p>
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>
</section>

<section id="twoCols">
	<h2>Afficher les éléments de la légende sur deux colonnes</h2>
	<div class="wb-geomap two-cols-legend legend-label-only" id="geomap_twoCols" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128",
		"overlays": [
			{
				"title": "Expansion et productivité des entreprises",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan",
				"type": "kml",
				"url": "demo/BusinessScaleProductivity_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"Expansion des entreprises": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						},
						"Productivité des entreprises": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "Écosystèmes d&apos;innovation régionaux",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan",
				"type": "kml",
				"url": "demo/RegionalInnovationEcosystem_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"Écosystèmes d&apos;innovation régionaux": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "CEDD (anciennement WDP)",
				"caption": "Cette carte interactive montre les projets en Colombie-Britannique. qui a reçu du financement des programmes de développement économique de PacifiCan.",
				"type": "kml",
				"url": "demo/WesternDiversificationProgram_fr.kml",
				"datatable": true,
				"attributes": {
					"Program": "Programme",
					"Project": "Projet"
				},
				"style": {
					"type": "unique",
					"field": "Programme",
					"init": {
						"CEDD (anciennement WDP)": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			}
		]
	}'>
		<div class="wb-geomap-map mrgn-bttm-lg"></div>
		<div class="panel panel-default">
			<header class="panel-heading">
				<h3 class="panel-title">Légende</h3>
			</header>
			<div class="panel-body">
				<p class="”h4”"><strong>Choisissez parmi les programmes PacifiCan suivants pour voir les projets financés à travers la Colombie-Britannique&nbsp;:</strong></p>
				<div class="wb-geomap-legend"></div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>
</section>

<section id="topojson_select">
	<h2>TopoJSON avec style de sélection et fenêtre contextuelle</h2>
	<div class="wb-geomap legend-label-only" id="geomap_topojson" data-wb-geomap='{
		"mapExtent": "78, -105, 44, -75",
		"caption": "Liste de toutes les provinces et territoires canadiens et de leur population",
		"overlays": [
			{
				"title": "Provinces canadiennes (TopoJSON)",
				"type": "topojson",
				"url": "demo/provinces_fr.json",
				"datatable": true,
				"tooltips": true,
				"popups": true,
				"attributes": {
					"PROVINCE": "Province",
					"POPULATION": "Population"
				},
				"style": {
					"strokeColor": "rgba(255,0,0,0.5)",
					"strokeWidth": 2.0,
					"fillColor": "rgba(255,0,0,0.1)",
					"select": {
						"strokeColor": "rgba(255,0,0,0.8)",
						"fillColor": "rgba(255,0,0,0.5)"
					}
				}
			}
		]
	}'>
		<div class="row mrgn-bttm-lg">
			<div class="col-xs-12 col-md-9">
				<div class="wb-geomap-map"></div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Légende</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>

	<h3>Code</h3>
	<details>
		<summary>Visualiser le code</summary>
		<pre><code>&lt;div class="wb-geomap legend-label-only" id="geomap_topojson" data-wb-geomap='{
	"mapExtent": "78, -105, 44, -75",
	"caption": "Liste de toutes les provinces et territoires canadiens et de leur population",
	"overlays": [
		{
			"title": "Provinces canadiennes (TopoJSON)",
			"type": "topojson",
			"url": "demo/provinces_fr.json",
			"datatable": true,
			"tooltips": true,
			"popups": true,
			"attributes": {
				"PROVINCE": "Province",
				"POPULATION": "Population"
			},
			"style": {
				"strokeColor": "rgba(255,0,0,0.5)",
				"strokeWidth": 2.0,
				"fillColor": "rgba(255,0,0,0.1)",
				"select": {
					"strokeColor": "rgba(255,0,0,0.8)",
					"fillColor": "rgba(255,0,0,0.5)"
				}
			}
		}
	]
}'>
	&lt;div class="row mrgn-bttm-lg">
		&lt;div class="col-xs-12 col-md-9">
			&lt;div class="wb-geomap-map">&lt;/div>
		&lt;/div>
		&lt;div class="col-xs-12 col-md-3">
			&lt;div class="panel panel-default">
				&lt;header class="panel-heading">
					&lt;h3 class="panel-title">Légende&lt;/h3>
				&lt;/header>
				&lt;div class="panel-body">
					&lt;div class="wb-geomap-legend">&lt;/div>
				&lt;/div>
			&lt;/div>
		&lt;/div>
	&lt;/div>
	&lt;div class="wb-geomap-layers">&lt;/div>
&lt;/div></code></pre>
	</details>
</section>
